import React, { Component } from 'react'
import {Form , Button , Input , Tree ,Message ,MessageBox , } from "element-react";
import ReactEcharts from 'echarts-for-react';

export default class Orgpage extends Component {

    treeRefresh = ()=>{
        fetch("/device/deviceorginfo/orgtree")
        .then(data=>data.json())
        .then(result=>{
            this.setState({data : result.list})
        })
    }
    componentDidMount(){
        fetch("/device/deviceorginfo/orgtree")
        .then(data=>data.json())
        .then(result=>{
            this.setState({data : result.list})
        })
    }    
    state = {
        data: [],
          options: {
            children: 'children',
            label: 'label'
          }  
    }
    append(store, data) {
        console.log( )
        store.root.expanded = true
        let newOrg = {
            id:"",
            label:"",
            level : data.level+1 ,
            parent: data.id 
        }
        MessageBox.msgbox({
            showCancelButton: true,
            message : (
                <Form>
                    <Form.Item >
                        <Input placeholder='组织名称' onChange={e=>{ newOrg.label = e }}></Input>
                    </Form.Item >
                </Form>
            )
        }).then(action=>{
            if(action==="confirm") {
                fetch("/device/deviceorginfo/save" , {
                    method:"POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body:JSON.stringify(newOrg) 
                }).then(data=>data.json())
                .then(result=>{
                    store.append({ id: result.id, label: newOrg.label, children: [] }, data);
                    this.setState({})
                    Message({
                        message:"添加",
                        type: result.msg
                    })
                })
            }
        })
        store.root.expanded = true
      }
      
      remove(store, data) {
        MessageBox.confirm('删除该组织, 是否继续?', '提示', {
            type: 'warning'
          }).then(() => {
            fetch("/device/deviceorginfo/delete" , {
                method:"POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body:JSON.stringify([data.id]) 
            }).then(data=>data.json())
            .then(result=>{
                store.remove(data)
                this.setState({})
                Message({
                  type: 'success',
                  message: '删除成功!'
                });
            })
          }).catch(() => {
            Message({
              type: 'info',
              message: '已取消删除'
            });
          });
        ;
      }

    renderContent(nodeModel, data, store) {
        return (
            <span>
            <span>
                <span>{data.label}</span>
            </span>
            <span style={{float: 'right', marginRight: '130px'}}>
                <Button size="mini" onClick={ () => this.append(store, data) }>添加</Button>
                <Button size="mini" onClick={ () => this.remove(store, data) } disabled={!nodeModel.isLeaf}>Delete</Button>
            </span>
            </span>);
    } 

    addTopOrg = ()=>{
        let newOrg = {
            id:"",
            label:"",
            level : 0 ,
            parent: "" 
        }
        MessageBox.msgbox({
            showCancelButton: true,
            message : (
                <Form>
                    <Form.Item >
                        <Input placeholder='组织名称' onChange={e=>{ newOrg.label = e }}></Input>
                    </Form.Item >
                </Form>
            )
        }).then(action=>{
            if(action==="confirm") {
                fetch("/device/deviceorginfo/save" , {
                    method:"POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body:JSON.stringify(newOrg) 
                }).then(data=>data.json())
                .then(result=>{
                    this.treeRefresh()
                    Message({
                        message:"添加",
                        type: result.msg
                    })
                })
            }
        })
    }


    render() {
        const { data, options } = this.state
        return (
            <div>
            <Button onClick={()=>{this.addTopOrg()}}>添加一级组织</Button> 
            <Input placeholder="输入关键字进行过滤" onChange={text=> this.tree.filter(text)} />
            <Tree
                ref={e=> this.tree = e}
                data={data}
                options={options}
                isShowCheckbox={true}
                nodeKey="id"
                expandOnClickNode={true}
                renderContent={(...args)=>this.renderContent(...args)}
                filterNodeMethod={(value, data)=>{
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
                }}
            />
            </div>
        )
    }

}
